<template>
  <!-- {{  props.barcodeList }} -->
  <div class="print-show" style="width: 1050px; height: 700px; overflow: auto">
    <div ref="print" id="barcode" style="width: 100%; height: 100%" v-if="barcodeList.length != 0">
      <div
        v-for="(item, index) in barcodeList"
        :key="index"
        style="width: 100%; padding: 20px 0; box-sizing: border-box; display: flex; align-items: center; flex-direction: column; page-break-after: always; border: 2px dashed #eee"
      >
        <div class="tableBox" style="width: 95%; display: flex; align-items: center">
          <table style="border-collapse: collapse; width: 100%">
            <tr>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">工单号：</th>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">{{ item.fbillno }}</td>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">生产订单号：</th>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">{{ item.fmobillno }}</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" rowspan="3" colspan="4">
                <div class="imgBox" style="width: 150px; height: 150px; margin: 0 auto; display: flex; justify-content: center; align-items: center">
                  <img style="width: 90%" :src="item.production_qr_code" />
                </div>
              </td>
            </tr>
            <tr>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">品号：</th>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">{{ item.fmaterialid }}</td>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">品名：</th>
              <td style="border: solid 1px #000; text-align: center; padding: 5px 3px" colspan="2">{{ item.fmaterialname }}</td>
            </tr>
            <tr>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">规格：</th>
              <td style="border: solid 1px #000; text-align: center; padding: 5px 3px">{{ item.fmaterialmodel }}</td>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">数量：</th>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">{{ item.fqty }}</td>
            </tr>
            <tr>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">灌装范围：</th>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px"></td>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">工艺名称：</th>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">{{ item.flow_name }}</td>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">单据日期：</th>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4">{{ nowDate }}</td>
            </tr>
            <tr>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">备注：</th>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4"></td>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">计划开工日期：</th>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4"></td>
            </tr>
            <tr v-for="(ele, eleIndex) in item.process" :key="eleIndex">
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">工序代号：</th>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">{{ ele.process_code }}</td>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">工序名称：</th>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">{{ ele.process_name }}</td>
              <td style="width: 100%; border: solid 1px #000; white-space: nowrap; padding: 5px 3px" colspan="4">
                <div class="imgBox" style="width: 100px; height: 100px; margin: 0 auto; display: flex; justify-content: center; align-items: center">
                  <img style="height: 100%" :src="ele.qr_code" />
                </div>
              </td>
            </tr>

            <tr>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="9"></td>
            </tr>
            <tr>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">子件品号</th>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">子件品名</th>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">规格</th>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">需领数量</th>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">已领数量</th>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">使用数量</th>
              <th style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">备注</th>
            </tr>
            <tr v-for="(ele, eleIndex) in item.details" :key="eleIndex">
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px; font-size: 12px">{{ ele.fmaterialid1 }}</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px; font-size: 12px" colspan="2">{{ ele.fmaterialname1 }}</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px; font-size: 12px" colspan="2">{{ ele.fmaterialmodel1 }}</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px; font-size: 12px">{{ Number(ele.fmustqty) }}</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px; font-size: 12px">{{ Number(ele.fpickedqty) }}</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px; font-size: 12px"></td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px; font-size: 12px"></td>
            </tr>
          </table>
        </div>
        <div style="width: 100%; padding: 0 50px; box-sizing: border-box; margin-top: 10px; display: flex; justify-content: space-around; align-items: center">
          <span style="width: 25%">生产员：</span>
          <span style="width: 25%">质检员：</span>
          <span style="width: 25%">审核员：</span>
          <span style="width: 25%">生产人员签名：</span>
        </div>
        <div style="width: 100%; padding: 0 50px; box-sizing: border-box; margin: 40px; display: flex; justify-content: flex-start; align-items: center">
          <span style="width: 50%">首月确认：</span>
          <span style="width: 50%">灌装送检：</span>
        </div>
      </div>
    </div>
  </div>
</template>

 
<script lang="ts" setup>
import storage from '/admin/utils/storage'
import utils from '/admin/utils/utils'
import { ref, watchEffect } from 'vue'
// import { getLodop } from '/admin/utils/LodopFuncs'
import printJS from 'print-js'
const props = defineProps({
  // barcodeList: Array,
  PrintNow: Boolean,
  output: Boolean,
})
const list = ref([])
// console.log('打印页面', props.printingArr)
// console.log('接受打印数据', props.barcodeList)
let barcodeList = ref([])
barcodeList.value = storage.getItem('barcodeList')

let nowDate = ref(utils.formateDate(new Date()))

console.log('渲染baorceode：', barcodeList.value)

const print = ref()

let emit = defineEmits(['send-data'])

watchEffect(() => {
  if (props.PrintNow == true) {
    console.log('触发更新：', props.PrintNow)
    triggerEvent()
    emit('send-data')
  }
  if (props.output == true) {
    console.log('触发导出：', props.output)
    triggerOutput()
  }
})

let triggerEvent = () => {
  printJS({
    printable: 'barcode', // 要打印的元素的ID或HTML字符串
    type: 'html', // 打印内容的类型，可以是'html'、'image'、'pdf'等
    targetStyle: ['*'],
    scanStyles: false,
  })
}

let triggerOutput = () => {
  console.log('调用导出')
  printJS({
    printable: 'barcode', // 要打印的元素的ID或HTML字符串
    type: 'pdf', // 打印内容的类型，可以是'html'、'image'、'pdf'等
    documentTitle: 'demo.pdf',
    style: '@page { size: A4; }',
    // targetStyle: ['*'],
    // scanStyles: false,
  })
}
</script>

<style lang="css" scoped>
.print-show {
  border: 1px solid #ccc;
  box-shadow: 2px 3px 10px #ccc;
  border-radius: 10px;
  /* margin-top: 10px; */
  /* width: 100%; */
  /* height: 70vh; */
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  transform: scale(0.95);
  transform-origin: 0, 0;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.bordered-table {
  border-collapse: collapse;
}

/* .bordered-table th,
.bordered-table td {
  border: 1px solid #000;
  padding: 8px;
} */
</style>

<!-- <style lang="scss" scoped>
 @media print {
  * {
    margin: 0 !important;
    padding: 0 !important;
  }
  .LocationTemplate {
    border: 2px solid red;
    width: 400px !important;
    height: 400px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .LocationTemplate .box {
    padding: 10px 20px !important;
    box-sizing: border-box !important;
    width: calc(90% / 6 * 4) !important;
    height: 90% !important;
    border: 2px solid #000 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
  }
  .box .item {
    width: 100%;
    height: 100%;
    font-weight: 600 !important;
  }
  .item-center {
    font-size: larger !important;
    text-align: center !important;
  }

  .imgBox {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 50px !important;
    height: 50px !important;
  }
} 
</style> -->
 
 <!-- <style>

* {
  margin: 0 !important;
  padding: 0 !important;
}
ul {
  list-style: none !important;
}
.LocationTemplate {
  border: 1px solid green !important;
  width: 500px !important;
  height: 500px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.box {
  padding: 10px 20px !important;
  box-sizing: border-box;
  width: calc(90% / 6 * 4);
  height: 90%;
  border: 2px solid #000;
}
.box ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.box ul li:last-child {
  width: 100%;
  height: 45%;
  /* border: 1px solid #000; */
  /* background-color: antiquewhite; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.box ul li {
  font-weight: 600;
  /* border: 1px solid green; */
}
.li-center {
  font-size: larger;
  text-align: center; white-space: nowrap;
}

.imgBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 80%;
  border: 1px solid #000;
}

img {
  display: inline-block;
  width: 90%;
}
</style> -->
